mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
Merge branch 'demo' of https://github.com/SFilinsky/ngx-admin into demo
This commit is contained in:
Sergey Filinsky
commit
780e230503
19 changed files with 672 additions and 8 deletions
|
|
@ -0,0 +1,56 @@
|
|||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {BackendIntegrationComponent} from './backend-integration.component';
|
||||
import {PhpIntegrationDescriptionComponent} from './descriptions/php-integration-description.component';
|
||||
import {DotNetIntegrationDescriptionComponent} from './descriptions/dot-net-integration-description.component';
|
||||
import {DotNetCoreIntegrationDescriptionComponent} from './descriptions/dot-net-core-integration-description.component';
|
||||
import {NodeJsIntegrationDescriptionComponent} from './descriptions/node-js-integration-description.component';
|
||||
import {JavaIntegrationDescriptionComponent} from './descriptions/java-integration-description.component';
|
||||
import {PythonIntegrationDescriptionComponent} from './descriptions/python-integration-description.component';
|
||||
import {EcommerceIntegrationDescriptionComponent} from './descriptions/ecommerce-integration-description.component';
|
||||
import {IotIntegrationDescriptionComponent} from './descriptions/iot-integration-description.component';
|
||||
|
||||
const routes: Routes = [{
|
||||
path: '',
|
||||
component: BackendIntegrationComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'php',
|
||||
component: PhpIntegrationDescriptionComponent,
|
||||
},
|
||||
{
|
||||
path: 'dot-net',
|
||||
component: DotNetIntegrationDescriptionComponent,
|
||||
},
|
||||
{
|
||||
path: 'dot-net-core',
|
||||
component: DotNetCoreIntegrationDescriptionComponent,
|
||||
},
|
||||
{
|
||||
path: 'node-js',
|
||||
component: NodeJsIntegrationDescriptionComponent,
|
||||
},
|
||||
{
|
||||
path: 'java',
|
||||
component: JavaIntegrationDescriptionComponent,
|
||||
},
|
||||
{
|
||||
path: 'python',
|
||||
component: PythonIntegrationDescriptionComponent,
|
||||
},
|
||||
{
|
||||
path: 'ecommerce',
|
||||
component: EcommerceIntegrationDescriptionComponent,
|
||||
},
|
||||
{
|
||||
path: 'iot',
|
||||
component: IotIntegrationDescriptionComponent,
|
||||
},
|
||||
],
|
||||
}];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class BackendIntegrationRoutingModule { }
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
@import '../../@theme/styles/themes';
|
||||
|
||||
:host {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.description-container, .diagram-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.diagram-container {
|
||||
flex: 2 1 auto;
|
||||
align-items: center;
|
||||
min-width: 35rem;
|
||||
}
|
||||
|
||||
.description-container {
|
||||
flex: 1 1 auto;
|
||||
max-width: 45rem;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
||||
& > *:not(router-outlet) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 991px) {
|
||||
:host {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
height: fit-content;
|
||||
|
||||
.diagram-container {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: fit-content;
|
||||
margin: 0 auto;
|
||||
|
||||
ngx-backend-integration-diagram {
|
||||
font-size: 2vw;
|
||||
height: 60vw;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-backend-integration',
|
||||
template: `
|
||||
<div class="diagram-container">
|
||||
<ngx-backend-integration-diagram></ngx-backend-integration-diagram>
|
||||
</div>
|
||||
<div class="description-container">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
`,
|
||||
styleUrls: ['./backend-integration.component.scss'],
|
||||
})
|
||||
export class BackendIntegrationComponent {
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import {ThemeModule} from '../../@theme/theme.module';
|
||||
import {NgModule} from '@angular/core';
|
||||
import {BackendIntegrationDiagramComponent} from './diagram/backend-integration-diagram.component';
|
||||
import {BackendIntegrationComponent} from './backend-integration.component';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {NbButtonModule, NbCardModule, NbIconModule} from '@nebular/theme';
|
||||
import {BackendIntegrationRoutingModule} from './backend-integration-routing.module';
|
||||
import {IntegrationDescriptionComponent} from './integration-description/integration-description.component';
|
||||
import {PhpIntegrationDescriptionComponent} from './descriptions/php-integration-description.component';
|
||||
import {DotNetIntegrationDescriptionComponent} from './descriptions/dot-net-integration-description.component';
|
||||
import {DotNetCoreIntegrationDescriptionComponent} from './descriptions/dot-net-core-integration-description.component';
|
||||
import {NodeJsIntegrationDescriptionComponent} from './descriptions/node-js-integration-description.component';
|
||||
import { JavaIntegrationDescriptionComponent } from './descriptions/java-integration-description.component';
|
||||
import { PythonIntegrationDescriptionComponent } from './descriptions/python-integration-description.component';
|
||||
import { EcommerceIntegrationDescriptionComponent } from './descriptions/ecommerce-integration-description.component';
|
||||
import { IotIntegrationDescriptionComponent } from './descriptions/iot-integration-description.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
ThemeModule,
|
||||
RouterModule,
|
||||
NbCardModule,
|
||||
BackendIntegrationRoutingModule,
|
||||
NbIconModule,
|
||||
NbButtonModule,
|
||||
],
|
||||
declarations: [
|
||||
BackendIntegrationComponent,
|
||||
BackendIntegrationDiagramComponent,
|
||||
PhpIntegrationDescriptionComponent,
|
||||
DotNetIntegrationDescriptionComponent,
|
||||
DotNetCoreIntegrationDescriptionComponent,
|
||||
NodeJsIntegrationDescriptionComponent,
|
||||
JavaIntegrationDescriptionComponent,
|
||||
PythonIntegrationDescriptionComponent,
|
||||
EcommerceIntegrationDescriptionComponent,
|
||||
IotIntegrationDescriptionComponent,
|
||||
IntegrationDescriptionComponent,
|
||||
],
|
||||
})
|
||||
export class BackendIntegrationModule { }
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dot-net-core-integration-description',
|
||||
template: `
|
||||
<ngx-integration-description [features]="features"
|
||||
[url]="url"
|
||||
[buttonText]="buttonText"
|
||||
></ngx-integration-description>
|
||||
`,
|
||||
})
|
||||
export class DotNetCoreIntegrationDescriptionComponent {
|
||||
|
||||
buttonText: string = 'Get Backend From 49$';
|
||||
url = 'https://store.akveo.com/collections/net-core-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnetcore';
|
||||
|
||||
features: string[] = [
|
||||
'Backend layered architecture, authentication, solution structure',
|
||||
'Ngx-admin template with 100+ UI components',
|
||||
'Authentication using JWT tokens is implemented and integrated into both client and server side',
|
||||
'Basic role management and ACL is in place',
|
||||
'Data entities classes, independent of any ORM',
|
||||
'Dependency injection takes care of services and repositories instantiation',
|
||||
'Swagger included for automatic API testing and documentation',
|
||||
'Serilog is used for logging',
|
||||
'OWIN startup is configured',
|
||||
'Documentation is included',
|
||||
'3 months free updates',
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-dot-net-integration-description',
|
||||
template: `
|
||||
<ngx-integration-description [features]="features"
|
||||
[url]="url"
|
||||
[buttonText]="buttonText"
|
||||
></ngx-integration-description>
|
||||
`,
|
||||
})
|
||||
export class DotNetIntegrationDescriptionComponent {
|
||||
|
||||
buttonText: string = 'Get Backend From 49$';
|
||||
url = 'https://store.akveo.com/collections/net-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnet';
|
||||
|
||||
features: string[] = [
|
||||
'Backend layered architecture, authentication, solution structure',
|
||||
'Ngx-admin angular UI with 100+ UI components to use',
|
||||
'Authentication using JWT tokens is implemented and integrated with both client and server side',
|
||||
'Basic role management and ACL is in place',
|
||||
'Swagger included for automatic API testing and documentation',
|
||||
'Serilog is used for logging',
|
||||
'OWIN startup is configured',
|
||||
'Documentation is included',
|
||||
'3 months free updates',
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-e-commerce-integration-description',
|
||||
template: `
|
||||
<ngx-integration-description [features]="features"
|
||||
[url]="url"
|
||||
[buttonText]="buttonText"
|
||||
></ngx-integration-description>
|
||||
`,
|
||||
})
|
||||
export class EcommerceIntegrationDescriptionComponent {
|
||||
|
||||
buttonText: string = 'Get Backend From 49$';
|
||||
url = 'https://store.akveo.com/collections/e-commerce-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_e-commerce';
|
||||
|
||||
features: string[] = [
|
||||
'E-commerce dashboard components integrated with backend',
|
||||
'Sample order table and order details page integrated with backend',
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-iot-integration-description',
|
||||
template: `
|
||||
<ngx-integration-description [features]="features"
|
||||
[url]="url"
|
||||
[buttonText]="buttonText"
|
||||
></ngx-integration-description>
|
||||
`,
|
||||
})
|
||||
export class IotIntegrationDescriptionComponent {
|
||||
|
||||
buttonText: string = 'Get Backend From 49$';
|
||||
url = 'https://store.akveo.com/collections/iot-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_iot';
|
||||
|
||||
features: string[] = [
|
||||
'IOT dashboard components integrated with backend',
|
||||
'Sample devices table and device details page integrated with backend',
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-java-integration-description',
|
||||
template: `
|
||||
<ngx-integration-description [features]="features"
|
||||
[url]="url"
|
||||
[buttonText]="buttonText"
|
||||
></ngx-integration-description>
|
||||
`,
|
||||
})
|
||||
export class JavaIntegrationDescriptionComponent {
|
||||
|
||||
buttonText: string = 'Get Backend From 49$';
|
||||
url = 'https://store.akveo.com/collections/java-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_java';
|
||||
|
||||
features: string[] = [
|
||||
'Ngx-admin template with 100+ UI components',
|
||||
'Spring Boot as the main framework for backend',
|
||||
'Maven as building tool',
|
||||
'Can be used with a range of SQL databases. In-Memory database H2 by default',
|
||||
'Authentication using Json Web Tokens is implemented and integrated with both client and server side',
|
||||
'Refresh Token functionality is available out of the box',
|
||||
`TSLint as part of Angular project settings, it simply wouldn't let you push typescript code with errors`,
|
||||
'Backend has Checkstyle setup and findbugs plugin for static code analysis',
|
||||
'Swagger for API documentation purpose',
|
||||
'Documentation is included',
|
||||
'3 months free updates',
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-node-js-integration-description',
|
||||
template: `
|
||||
<ngx-integration-description [features]="features"
|
||||
[url]="url"
|
||||
[buttonText]="buttonText"
|
||||
></ngx-integration-description>
|
||||
`,
|
||||
})
|
||||
export class NodeJsIntegrationDescriptionComponent {
|
||||
|
||||
buttonText: string = 'Get Backend From 49$';
|
||||
url = 'https://store.akveo.com/collections/nodejs-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_nodejs';
|
||||
|
||||
features: string[] = [
|
||||
'MongoDB for user data storage',
|
||||
'Express server',
|
||||
'Authentication using Passport and JWT tokens is implemented and integrated with both client and server side',
|
||||
'Eslint for code quality on the backend side',
|
||||
'Winston is used for logging',
|
||||
'Node-config is used for API settings',
|
||||
'Nodemon is used for better development experience',
|
||||
'Documentation is included',
|
||||
'Basic role management and ACL is in place',
|
||||
'Swagger included for automatic API testing and documentation',
|
||||
'3 months free updates',
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-php-integration-description',
|
||||
template: `
|
||||
<ngx-integration-description [features]="features"
|
||||
[url]="url"
|
||||
[buttonText]="buttonText"
|
||||
></ngx-integration-description>
|
||||
`,
|
||||
})
|
||||
export class PhpIntegrationDescriptionComponent {
|
||||
|
||||
buttonText: string = 'Get Backend From 49$';
|
||||
url = 'https://store.akveo.com/products/material-php-starter-bundle?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin%20&utm_medium=referral%20&utm_content=sidebar_link_php';
|
||||
|
||||
features: string[] = [
|
||||
'Ngx-admin template with 100+ UI Nebular and Eva design components',
|
||||
'Authentication using JWT tokens is implemented and integrated into both client and server-side',
|
||||
'Basic role management and ACL is in place, AUTH, reset the password',
|
||||
'Backend solution layered architecture and projects segregation',
|
||||
'Swagger included for automatic API testing and documentation',
|
||||
'Documentation is included',
|
||||
'Docker and docker-compose configuration included',
|
||||
'MySQL database',
|
||||
'3 months free updates',
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-python-integration-description',
|
||||
template: `
|
||||
<ngx-integration-description [features]="features"
|
||||
[url]="url"
|
||||
[buttonText]="buttonText"
|
||||
></ngx-integration-description>
|
||||
`,
|
||||
})
|
||||
export class PythonIntegrationDescriptionComponent {
|
||||
|
||||
buttonText: string = 'Get Backend From 49$';
|
||||
url = 'https://store.akveo.com/collections/python-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_python';
|
||||
|
||||
features: string[] = [
|
||||
'ngx-admin template with 100+ UI components',
|
||||
'Python backend with Flask micro-framework',
|
||||
'Any SQL database can be used (PostgreSQL, MySQL, Oracle, Microsoft SQL Server, and SQLite)',
|
||||
'SQLAlchemy as database toolkit for CRUD operations',
|
||||
'Authentication using JWT tokens is implemented and integrated with both client and server side',
|
||||
'Compression is set up for better performance',
|
||||
'Documentation is included',
|
||||
'3 months free updates',
|
||||
];
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<div class='flex-column justify-content-center'>
|
||||
<div class='flex-row justify-content-center header mt-auto mb-1'> What is admin dashboard with backend</div>
|
||||
<div class='flex-row justify-content-center subheader'> You pay for backend connection (UI) + backend</div>
|
||||
<div class='flex-row align-items-start justify-content-around mt-4 mb-auto'>
|
||||
<div class='dashboard-container h-100 flex-column ml-3 mr-3'>
|
||||
<div class='headers-container flex-column'>
|
||||
<div class='header'> NGX-admin dashboard</div>
|
||||
<div class='subheader'> Open source part + backend connection</div>
|
||||
</div>
|
||||
<div class='dashboard-content border-dashed pad1 flex-column justify-content-center'>
|
||||
<div class='item mb-3'>
|
||||
<div class='header'> REST Data Access</div>
|
||||
</div>
|
||||
<div class='flex-column border-dashed mb-3 p-3'>
|
||||
<div class='item mb-3'>
|
||||
<div class='header'> Nebular Components</div>
|
||||
</div>
|
||||
<div class='flex-row w-100'>
|
||||
<div class='item flex-grow-1 mr-2'>
|
||||
<div class='header'> Auth</div>
|
||||
</div>
|
||||
<div class='item flex-grow-1'>
|
||||
<div class='header'> Security</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='item mb-3'>
|
||||
<div class='header'> Angular</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='json-container mt-auto mb-auto header2 align-items-center'>
|
||||
<nb-icon icon='arrow-back-outline'></nb-icon>
|
||||
<div>JSON</div>
|
||||
<nb-icon icon='arrow-forward-outline'></nb-icon>
|
||||
</div>
|
||||
<div class='backend-container h-100 flex-column ml-3 mr-3'>
|
||||
<div class='headers-container flex-column'>
|
||||
<div class='header justify-content-center'> Backend</div>
|
||||
</div>
|
||||
<div class='backend-content border-dashed pad1 flex-column justify-content-center'>
|
||||
<div class='flex-column border-dashed mb-3 p-3'>
|
||||
<div class='item mb-3'>
|
||||
<div class='header'> Web API</div>
|
||||
<div class='subheader'> Backend Interface</div>
|
||||
</div>
|
||||
<div class='item mb-3'>
|
||||
<div class='header'> Service</div>
|
||||
<div class='subheader'> Data organization Business logic</div>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<div class='header'> Security</div>
|
||||
<div class='subheader'> Authentication, Authorization</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='flex-row w-100'>
|
||||
<div class='flex-column flex-grow-1 mr-3'>
|
||||
<div class='item mb-3'>
|
||||
<div class='header'> Repository</div>
|
||||
<div class='subheader'> Data access</div>
|
||||
</div>
|
||||
<div class='item'>
|
||||
<div class='header'> Entity Framework</div>
|
||||
<div class='subheader'> Data transformation</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='item h-100 flex-grow-1 mr-3'>
|
||||
<div class='item'>
|
||||
<div class='header'> Data Base</div>
|
||||
<div class='subheader'>
|
||||
<div>Data of product</div>
|
||||
<div>+</div>
|
||||
<div>Backend data (examples)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
position: relative;
|
||||
padding-top: 80%; /* Aspect Ratio */
|
||||
//background-color: transparentize(red, 0.8);
|
||||
font-size: 0.9vw;
|
||||
|
||||
$subheader-color: nb-theme(text-hint-color);
|
||||
|
||||
.header, .subheader {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& > .header {
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& > .subheader {
|
||||
font-size: 0.9em;
|
||||
color: $subheader-color;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.json-container {
|
||||
font-weight: bold;
|
||||
div {
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.headers-container {
|
||||
height: 2.5rem;
|
||||
|
||||
& > .header {
|
||||
font-size: 0.9em;
|
||||
height: 0.9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
& > .subheader {
|
||||
font-size: 0.7em;
|
||||
height: 0.7rem;
|
||||
color: $subheader-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.json-container {
|
||||
width: fit-content;
|
||||
|
||||
nb-icon {
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.backend-container {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border: 2px dashed nb-theme(border-basic-color-4);
|
||||
}
|
||||
|
||||
.pad1 {
|
||||
background-color: transparentize(nb-theme(background-basic-color-2), 0.5);
|
||||
padding: 1em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
background-color: nb-theme(background-basic-color-1);
|
||||
justify-content: center;
|
||||
padding: 0.5em 0;
|
||||
flex-direction: column;
|
||||
& > .header {
|
||||
font-size: 0.7em;
|
||||
font-weight: bold;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
& > .subheader {
|
||||
font-size: 0.6em;
|
||||
color: $subheader-color;
|
||||
line-height: 1em;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-backend-integration-diagram',
|
||||
templateUrl: './backend-integration-diagram.component.html',
|
||||
styleUrls: ['./backend-integration-diagram.component.scss'],
|
||||
})
|
||||
export class BackendIntegrationDiagramComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
background-color: nb-theme(background-basic-color-1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 1rem 2rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header, .header2 {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
width: fit-content;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-integration-description[features][url][buttonText]',
|
||||
template: `
|
||||
<div class='header'> For why do you need a backend admin dashboard?</div>
|
||||
<div class='subheader'> To save up to 300 hours on development. To use backend as ready to use examples. </div>
|
||||
<div class='header2'> Features </div>
|
||||
<ul class='features-list'>
|
||||
<li *ngFor='let feature of features'
|
||||
class='feature'
|
||||
>
|
||||
- {{ feature }}
|
||||
</li>
|
||||
</ul>
|
||||
<a nbButton
|
||||
[href]='url'
|
||||
status="primary"
|
||||
target="_blank"
|
||||
> {{buttonText}} </a>
|
||||
`,
|
||||
styleUrls: ['./integration-description.component.scss'],
|
||||
})
|
||||
export class IntegrationDescriptionComponent {
|
||||
|
||||
@Input() features: string[];
|
||||
@Input() url: string;
|
||||
@Input() buttonText: string;
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
@ -18,35 +18,35 @@ export const MENU_ITEMS: NbMenuItem[] = [
|
|||
children: [
|
||||
{
|
||||
title: 'PHP',
|
||||
url: 'https://store.akveo.com/products/material-php-starter-bundle?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin%20&utm_medium=referral%20&utm_content=sidebar_link_php',
|
||||
link: '/pages/backend-integration/php',
|
||||
},
|
||||
{
|
||||
title: '.NET',
|
||||
url: 'https://store.akveo.com/collections/net-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnet',
|
||||
link: '/pages/backend-integration/dot-net',
|
||||
},
|
||||
{
|
||||
title: '.NET Core',
|
||||
url: 'https://store.akveo.com/collections/net-core-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnetcore',
|
||||
link: '/pages/backend-integration/dot-net-core',
|
||||
},
|
||||
{
|
||||
title: 'Node JS',
|
||||
url: 'https://store.akveo.com/collections/nodejs-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_nodejs',
|
||||
link: '/pages/backend-integration/node-js',
|
||||
},
|
||||
{
|
||||
title: 'Java',
|
||||
url: 'https://store.akveo.com/collections/java-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_java',
|
||||
link: '/pages/backend-integration/java',
|
||||
},
|
||||
{
|
||||
title: 'Python',
|
||||
url: 'https://store.akveo.com/collections/python-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_python',
|
||||
link: '/pages/backend-integration/python',
|
||||
},
|
||||
{
|
||||
title: 'E-commerce',
|
||||
url: 'https://store.akveo.com/collections/e-commerce-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_e-commerce',
|
||||
link: '/pages/backend-integration/ecommerce',
|
||||
},
|
||||
{
|
||||
title: 'IoT',
|
||||
url: 'https://store.akveo.com/collections/iot-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_iot',
|
||||
link: '/pages/backend-integration/iot',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,6 +18,11 @@ const routes: Routes = [{
|
|||
path: 'iot-dashboard',
|
||||
component: DashboardComponent,
|
||||
},
|
||||
{
|
||||
path: 'backend-integration',
|
||||
loadChildren: () => import('./backend-integration/backend-integration.module')
|
||||
.then(m => m.BackendIntegrationModule),
|
||||
},
|
||||
{
|
||||
path: 'layout',
|
||||
loadChildren: () => import('./layout/layout.module')
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue