setup basic appModule services
This commit is contained in:
@ -59,7 +59,8 @@
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "material-dashboard-angular:build"
|
||||
"browserTarget": "material-dashboard-angular:build",
|
||||
"proxyConfig": "proxy.config.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
|
14
proxy.config.json
Normal file
14
proxy.config.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"/api": {
|
||||
"target": "http://localhost:3000",
|
||||
"secure": false
|
||||
},
|
||||
"/login": {
|
||||
"target": "http://localhost:3000",
|
||||
"secure": false
|
||||
},
|
||||
"/logout": {
|
||||
"target": "http://localhost:3000",
|
||||
"secure": false
|
||||
}
|
||||
}
|
11
src/app/AppModulesTypes.ts
Normal file
11
src/app/AppModulesTypes.ts
Normal file
@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
interface AvailableAppModule {
|
||||
name: string;
|
||||
customers: string[];
|
||||
}
|
||||
|
||||
|
||||
export {
|
||||
AvailableAppModule
|
||||
}
|
12
src/app/app-modules.service.spec.ts
Normal file
12
src/app/app-modules.service.spec.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AppModulesService } from './app-modules.service';
|
||||
|
||||
describe('AppModulesService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: AppModulesService = TestBed.get(AppModulesService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
35
src/app/app-modules.service.ts
Normal file
35
src/app/app-modules.service.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Observable, throwError } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
|
||||
|
||||
import { AvailableAppModule } from './AppModulesTypes';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class AppModulesService {
|
||||
|
||||
constructor(private http: HttpClient) { }
|
||||
|
||||
public getAvailableAppModules() {
|
||||
// returns all app modules and indicates the customers for which the user can use the modules
|
||||
return this.http.get<AvailableAppModule[]>('/api/v1/modules').pipe(catchError(this.handleError));
|
||||
}
|
||||
|
||||
private handleError(error: HttpErrorResponse) {
|
||||
if (error.error instanceof ErrorEvent) {
|
||||
// client or network error
|
||||
console.error('An error occurred:', error.error.message);
|
||||
} else {
|
||||
// backend returned an error
|
||||
console.error(
|
||||
`Backend returned code ${error.status}, ` +
|
||||
`body was: ${error.error}`
|
||||
);
|
||||
}
|
||||
return throwError(
|
||||
`An eror occurred`
|
||||
);
|
||||
}
|
||||
}
|
@ -1,15 +1,22 @@
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
|
||||
import { AppRoutingModule } from './app.routing';
|
||||
import { ComponentsModule } from './components/components.module';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
// Services
|
||||
import { AppModulesService } from './app-modules.service';
|
||||
import { LinkifyService } from './linkify.service';
|
||||
|
||||
// Pipes
|
||||
import { LinkifyPipe } from './linkify.pipe';
|
||||
|
||||
// Template Components
|
||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||
import { UserProfileComponent } from './user-profile/user-profile.component';
|
||||
import { TableListComponent } from './table-list/table-list.component';
|
||||
@ -27,7 +34,7 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
|
||||
imports: [
|
||||
BrowserAnimationsModule,
|
||||
FormsModule,
|
||||
HttpModule,
|
||||
HttpClientModule,
|
||||
ComponentsModule,
|
||||
RouterModule,
|
||||
AppRoutingModule,
|
||||
@ -38,9 +45,12 @@ import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.compon
|
||||
declarations: [
|
||||
AppComponent,
|
||||
AdminLayoutComponent,
|
||||
|
||||
LinkifyPipe
|
||||
],
|
||||
providers: [
|
||||
AppModulesService,
|
||||
LinkifyService
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
@ -1,5 +1,10 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { AppModulesService } from '../../app-modules.service';
|
||||
|
||||
import { AvailableAppModule } from '../../AppModulesTypes';
|
||||
import { LinkifyService } from '../../linkify.service';
|
||||
|
||||
declare const $: any;
|
||||
declare interface RouteInfo {
|
||||
path: string;
|
||||
@ -26,10 +31,26 @@ export const ROUTES: RouteInfo[] = [
|
||||
export class SidebarComponent implements OnInit {
|
||||
menuItems: any[];
|
||||
|
||||
constructor() { }
|
||||
constructor(
|
||||
private appModulesService: AppModulesService,
|
||||
private linkify: LinkifyService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.menuItems = ROUTES.filter(menuItem => menuItem);
|
||||
let self = this;
|
||||
this.appModulesService.getAvailableAppModules().subscribe((availableModules: AvailableAppModule[]) => {
|
||||
self.menuItems = availableModules.map((appModule: AvailableAppModule) => {
|
||||
return {
|
||||
path: this.linkify.transform(appModule.name),
|
||||
title: appModule.name,
|
||||
icon: "dashboard",
|
||||
class: "",
|
||||
label: ""
|
||||
};
|
||||
});
|
||||
// self.appModules = availableModules;
|
||||
});
|
||||
}
|
||||
isMobileMenu() {
|
||||
if ($(window).width() > 991) {
|
||||
|
@ -66,85 +66,85 @@ export class DashboardComponent implements OnInit {
|
||||
seq2 = 0;
|
||||
};
|
||||
ngOnInit() {
|
||||
/* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */
|
||||
|
||||
const dataDailySalesChart: any = {
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
series: [
|
||||
[12, 17, 7, 17, 23, 18, 38]
|
||||
]
|
||||
};
|
||||
|
||||
const optionsDailySalesChart: any = {
|
||||
lineSmooth: Chartist.Interpolation.cardinal({
|
||||
tension: 0
|
||||
}),
|
||||
low: 0,
|
||||
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||
chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
|
||||
}
|
||||
|
||||
var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
|
||||
|
||||
this.startAnimationForLineChart(dailySalesChart);
|
||||
|
||||
|
||||
/* ----------========== Completed Tasks Chart initialization ==========---------- */
|
||||
|
||||
const dataCompletedTasksChart: any = {
|
||||
labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
|
||||
series: [
|
||||
[230, 750, 450, 300, 280, 240, 200, 190]
|
||||
]
|
||||
};
|
||||
|
||||
const optionsCompletedTasksChart: any = {
|
||||
lineSmooth: Chartist.Interpolation.cardinal({
|
||||
tension: 0
|
||||
}),
|
||||
low: 0,
|
||||
high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||
chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
|
||||
}
|
||||
|
||||
var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
|
||||
|
||||
// start animation for the Completed Tasks Chart - Line Chart
|
||||
this.startAnimationForLineChart(completedTasksChart);
|
||||
|
||||
|
||||
|
||||
/* ----------========== Emails Subscription Chart initialization ==========---------- */
|
||||
|
||||
var datawebsiteViewsChart = {
|
||||
labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
|
||||
series: [
|
||||
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
|
||||
|
||||
]
|
||||
};
|
||||
var optionswebsiteViewsChart = {
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
low: 0,
|
||||
high: 1000,
|
||||
chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
|
||||
};
|
||||
var responsiveOptions: any[] = [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
|
||||
|
||||
//start animation for the Emails Subscription Chart
|
||||
this.startAnimationForBarChart(websiteViewsChart);
|
||||
// /* ----------========== Daily Sales Chart initialization For Documentation ==========---------- */
|
||||
//
|
||||
// const dataDailySalesChart: any = {
|
||||
// labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
// series: [
|
||||
// [12, 17, 7, 17, 23, 18, 38]
|
||||
// ]
|
||||
// };
|
||||
//
|
||||
// const optionsDailySalesChart: any = {
|
||||
// lineSmooth: Chartist.Interpolation.cardinal({
|
||||
// tension: 0
|
||||
// }),
|
||||
// low: 0,
|
||||
// high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||
// chartPadding: { top: 0, right: 0, bottom: 0, left: 0},
|
||||
// }
|
||||
//
|
||||
// var dailySalesChart = new Chartist.Line('#dailySalesChart', dataDailySalesChart, optionsDailySalesChart);
|
||||
//
|
||||
// this.startAnimationForLineChart(dailySalesChart);
|
||||
//
|
||||
//
|
||||
// /* ----------========== Completed Tasks Chart initialization ==========---------- */
|
||||
//
|
||||
// const dataCompletedTasksChart: any = {
|
||||
// labels: ['12p', '3p', '6p', '9p', '12p', '3a', '6a', '9a'],
|
||||
// series: [
|
||||
// [230, 750, 450, 300, 280, 240, 200, 190]
|
||||
// ]
|
||||
// };
|
||||
//
|
||||
// const optionsCompletedTasksChart: any = {
|
||||
// lineSmooth: Chartist.Interpolation.cardinal({
|
||||
// tension: 0
|
||||
// }),
|
||||
// low: 0,
|
||||
// high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||
// chartPadding: { top: 0, right: 0, bottom: 0, left: 0}
|
||||
// }
|
||||
//
|
||||
// var completedTasksChart = new Chartist.Line('#completedTasksChart', dataCompletedTasksChart, optionsCompletedTasksChart);
|
||||
//
|
||||
// // start animation for the Completed Tasks Chart - Line Chart
|
||||
// this.startAnimationForLineChart(completedTasksChart);
|
||||
//
|
||||
//
|
||||
//
|
||||
// /* ----------========== Emails Subscription Chart initialization ==========---------- */
|
||||
//
|
||||
// var datawebsiteViewsChart = {
|
||||
// labels: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
|
||||
// series: [
|
||||
// [542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]
|
||||
//
|
||||
// ]
|
||||
// };
|
||||
// var optionswebsiteViewsChart = {
|
||||
// axisX: {
|
||||
// showGrid: false
|
||||
// },
|
||||
// low: 0,
|
||||
// high: 1000,
|
||||
// chartPadding: { top: 0, right: 5, bottom: 0, left: 0}
|
||||
// };
|
||||
// var responsiveOptions: any[] = [
|
||||
// ['screen and (max-width: 640px)', {
|
||||
// seriesBarDistance: 5,
|
||||
// axisX: {
|
||||
// labelInterpolationFnc: function (value) {
|
||||
// return value[0];
|
||||
// }
|
||||
// }
|
||||
// }]
|
||||
// ];
|
||||
// var websiteViewsChart = new Chartist.Bar('#websiteViewsChart', datawebsiteViewsChart, optionswebsiteViewsChart, responsiveOptions);
|
||||
//
|
||||
// //start animation for the Emails Subscription Chart
|
||||
// this.startAnimationForBarChart(websiteViewsChart);
|
||||
}
|
||||
|
||||
}
|
||||
|
8
src/app/linkify.pipe.spec.ts
Normal file
8
src/app/linkify.pipe.spec.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { LinkifyPipe } from './linkify.pipe';
|
||||
|
||||
describe('LinkifyPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new LinkifyPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
12
src/app/linkify.pipe.ts
Normal file
12
src/app/linkify.pipe.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
|
||||
@Pipe({
|
||||
name: 'linkify'
|
||||
})
|
||||
export class LinkifyPipe implements PipeTransform {
|
||||
|
||||
transform(value: any, args?: any): any {
|
||||
return value.toLowerCase().split(' ').join('-');
|
||||
}
|
||||
|
||||
}
|
15
src/app/linkify.service.spec.ts
Normal file
15
src/app/linkify.service.spec.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { TestBed, inject } from '@angular/core/testing';
|
||||
|
||||
import { LinkifyService } from './linkify.service';
|
||||
|
||||
describe('LinkifyService', () => {
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
providers: [LinkifyService]
|
||||
});
|
||||
});
|
||||
|
||||
it('should be created', inject([LinkifyService], (service: LinkifyService) => {
|
||||
expect(service).toBeTruthy();
|
||||
}));
|
||||
});
|
13
src/app/linkify.service.ts
Normal file
13
src/app/linkify.service.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class LinkifyService {
|
||||
|
||||
constructor() { }
|
||||
|
||||
transform(value: any, args?: any): any {
|
||||
return value.toLowerCase().split(' ').join('-');
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user