feat(demo): added backend integration descriptions (#5768)

package-lock.json

@@ -16530,6 +16530,11 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ng-inline-svg": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/ng-inline-svg/-/ng-inline-svg-11.0.0.tgz",
+      "integrity": "sha512-D4dXt379cveaYJobu7JnYixZzw/+AqRkMGDqOrNhGDEiBgDaxb8DZ57mSg8V9ekTl3fK+H98p9SevhLSakzRkA=="
+    },
     "ng-lazyload-image": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.1.0.tgz",

package.json

@@ -61,8 +61,8 @@
     "chart.js": "2.7.1",
     "ckeditor": "4.7.3",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.1",
     "colors.js": "1.2.4",
+    "core-js": "2.5.1",
     "echarts": "^4.0.2",
     "eva-icons": "^1.1.3",
     "gulp-bump": "2.7.0",
@@ -72,12 +72,13 @@
     "leaflet": "1.2.0",
     "marked": "^0.5.2",
     "nebular-icons": "1.1.0",
+    "ng-inline-svg": "^11.0.0",
     "ng-lazyload-image": "^7.1.0",
     "ng2-ckeditor": "^1.2.9",
     "ng2-smart-table": "^1.6.0",
     "ngx-echarts": "^4.2.2",
-    "node-sass": "^4.12.0",
     "ngx-swiper-wrapper": "^9.0.1",
+    "node-sass": "^4.12.0",
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",

src/app/app.module.ts

@@ -20,6 +20,7 @@ import {
   NbToastrModule,
   NbWindowModule,
 } from '@nebular/theme';
+import {InlineSVGModule} from 'ng-inline-svg';
 
 @NgModule({
   declarations: [AppComponent],
@@ -39,6 +40,7 @@ import {
     }),
     CoreModule.forRoot(),
     ThemeModule.forRoot(),
+    InlineSVGModule.forRoot(),
   ],
   bootstrap: [AppComponent],
 })

src/app/pages/backend-integration/backend-integration-routing.module.ts

@@ -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 { }

src/app/pages/backend-integration/backend-integration.component.scss

@@ -0,0 +1,58 @@
+@import '../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+: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: 30rem;
+  width: 70%;
+}
+
+.description-container {
+  flex: 1 2 auto;
+  max-width: 45rem;
+  align-items: stretch;
+  height: 100%;
+
+  ::ng-deep :last-child {
+    width: 100%;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  :host {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+
+    .diagram-container, .description-container {
+      width: 100%;
+      max-width: none;
+    }
+
+    .description-container {
+      padding-bottom: 1.5rem;
+
+      ::ng-deep ngx-integration-description .subheader {
+        margin-bottom: 1.5rem;
+      }
+    }
+
+    .diagram-container {
+      min-width: 0;
+    }
+  }
+}
+

src/app/pages/backend-integration/backend-integration.component.ts

@@ -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 {
+}

src/app/pages/backend-integration/backend-integration.module.ts

@@ -0,0 +1,43 @@
+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';
+import {InlineSVGModule} from 'ng-inline-svg';
+
+@NgModule({
+  imports: [
+    ThemeModule,
+    RouterModule,
+    NbCardModule,
+    BackendIntegrationRoutingModule,
+    NbIconModule,
+    NbButtonModule,
+    InlineSVGModule,
+  ],
+  declarations: [
+    BackendIntegrationComponent,
+    BackendIntegrationDiagramComponent,
+    PhpIntegrationDescriptionComponent,
+    DotNetIntegrationDescriptionComponent,
+    DotNetCoreIntegrationDescriptionComponent,
+    NodeJsIntegrationDescriptionComponent,
+    JavaIntegrationDescriptionComponent,
+    PythonIntegrationDescriptionComponent,
+    EcommerceIntegrationDescriptionComponent,
+    IotIntegrationDescriptionComponent,
+    IntegrationDescriptionComponent,
+  ],
+})
+export class BackendIntegrationModule { }

src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts

@@ -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 = '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',
+  ];
+
+}

src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts

@@ -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 = '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',
+  ];
+
+}

src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts

@@ -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 = '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',
+  ];
+
+}

src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts

@@ -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 = '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',
+  ];
+
+}

src/app/pages/backend-integration/descriptions/java-integration-description.component.ts

@@ -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 = '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',
+  ];
+
+}

src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts

@@ -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 = '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',
+  ];
+
+}

src/app/pages/backend-integration/descriptions/php-integration-description.component.ts

@@ -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 = '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',
+  ];
+
+}

src/app/pages/backend-integration/descriptions/python-integration-description.component.ts

@@ -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 = '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',
+  ];
+
+}

src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html

@@ -0,0 +1,2 @@
+<div inlineSVG="assets/images/backend-integration-diagram.svg">
+</div>

src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss

@@ -0,0 +1,29 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  width: 100%;
+
+  ::ng-deep svg {
+    path.card-header, path.subcard-header, path.diagram-header {
+      fill: nb-theme(text-basic-color);
+    }
+
+    path.card-subheader, path.subcard-subheader, path.diagram-subheader {
+      fill: nb-theme(text-hint-color);
+    }
+
+    rect.card-background {
+      fill: nb-theme(background-basic-color-2);
+      stroke: nb-theme(border-basic-color-5);
+    }
+
+    rect.subcard-background {
+      fill: nb-theme(background-basic-color-1);
+    }
+
+    path.subcard-border {
+      fill: nb-theme(background-basic-color-2);
+      stroke: nb-theme(border-basic-color-5);
+    }
+  }
+}

src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-backend-integration-diagram',
+  templateUrl: './backend-integration-diagram.component.html',
+  styleUrls: ['./backend-integration-diagram.component.scss'],
+})
+export class BackendIntegrationDiagramComponent {}

src/app/pages/backend-integration/integration-description/integration-description.component.scss

@@ -0,0 +1,30 @@
+@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%;
+
+  .h6 {
+    margin-bottom: 1rem;
+  }
+
+  .subtitle {
+    margin-bottom: 3rem;
+  }
+
+  .features-list {
+    list-style-type: '- ';
+    padding-left: 0;
+  }
+
+  a {
+    width: auto;
+    align-self: flex-start;
+    margin-top: 2rem;
+  }
+}

src/app/pages/backend-integration/integration-description/integration-description.component.ts

@@ -0,0 +1,30 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'ngx-integration-description',
+  template: `
+    <div class="h6"> For why do you need a backend admin dashboard?</div>
+    <div class="subtitle"> To save up to 300 hours on development. To use backend as ready to use examples. </div>
+    <div class="h6"> 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;
+
+}

src/app/pages/pages-menu.ts

@@ -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',
       },
     ],
   },

src/app/pages/pages-routing.module.ts

@@ -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')