From dfd430712d33d1ef5943082b6f751430215186ef Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Thu, 1 Feb 2018 15:30:30 +0300 Subject: [PATCH] Fixed some naming inconsistencies in Project dashboard + Added fake db for Analytics Dashboard --- src/app/fuse-fake-db/dashboard-analytics.ts | 518 ++++++++++++++++++ ...ects-dashboard.ts => dashboard-project.ts} | 2 +- src/app/fuse-fake-db/fuse-fake-db.service.ts | 131 +++-- .../dashboards/project/project.component.html | 214 +++++--- .../dashboards/project/project.component.scss | 10 + .../dashboards/project/project.component.ts | 15 +- .../apps/dashboards/project/project.module.ts | 13 +- .../dashboards/project/project.service.ts | 62 +++ 8 files changed, 829 insertions(+), 136 deletions(-) create mode 100644 src/app/fuse-fake-db/dashboard-analytics.ts rename src/app/fuse-fake-db/{projects-dashboard.ts => dashboard-project.ts} (99%) create mode 100644 src/app/main/content/apps/dashboards/project/project.service.ts diff --git a/src/app/fuse-fake-db/dashboard-analytics.ts b/src/app/fuse-fake-db/dashboard-analytics.ts new file mode 100644 index 00000000..086e5d34 --- /dev/null +++ b/src/app/fuse-fake-db/dashboard-analytics.ts @@ -0,0 +1,518 @@ +export class AnalyticsDashboardDb +{ + public static widgets = { + /*widget2: { + overallGrowthPercentage: 17, + overallGrowthTrend : 'decrease', + averageDailyPercentage : 28, + averageDailyTrend : 'increase' + },*/ + widget1: { + chartType: 'line', + datasets : { + '2015': [ + { + label: 'Sales', + data : [1.9, 3, 3.4, 2.2, 2.9, 3.9, 2.5, 3.8, 4.1, 3.8, 3.2, 2.9], + fill : 'start' + + } + ], + '2016': [ + { + label: 'Sales', + data : [2.2, 2.9, 3.9, 2.5, 3.8, 3.2, 2.9, 1.9, 3, 3.4, 4.1, 3.8], + fill : 'start' + + } + ], + '2017': [ + { + label: 'Sales', + data : [3.9, 2.5, 3.8, 4.1, 1.9, 3, 3.8, 3.2, 2.9, 3.4, 2.2, 2.9], + fill : 'start' + + } + ] + + }, + labels : ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], + colors : [ + { + borderColor : '#42a5f5', + backgroundColor : '#42a5f5', + pointBackgroundColor : '#1e88e5', + pointHoverBackgroundColor: '#1e88e5', + pointBorderColor : '#ffffff', + pointHoverBorderColor : '#ffffff' + } + ], + options : { + spanGaps : false, + legend : { + display: false + }, + maintainAspectRatio: false, + layout : { + padding: { + top : 32, + left : 32, + right: 32 + } + }, + elements : { + point: { + radius : 4, + borderWidth : 2, + hoverRadius : 4, + hoverBorderWidth: 2 + }, + line : { + tension: 0 + } + }, + scales : { + xAxes: [ + { + gridLines: { + display : false, + drawBorder : false, + tickMarkLength: 18 + }, + ticks : { + fontColor: '#ffffff' + } + } + ], + yAxes: [ + { + display: false, + ticks : { + min : 1.5, + max : 5, + stepSize: 0.5 + } + } + ] + }, + plugins : { + filler : { + propagate: false + }, + xLabelsOnTop: { + active: true + } + } + } + }, + widget2: { + conversion: { + value : 492, + ofTarget: 22 + }, + scheme : { + domain: ['#5c84f1'] + }, + data : [ + { + name : 'Monday', + value: 221 + }, + { + name : 'Tuesday', + value: 428 + }, + { + name : 'Wednesday', + value: 492 + }, + { + name : 'Thursday', + value: 471 + }, + { + name : 'Friday', + value: 413 + }, + { + name : 'Saturday', + value: 344 + }, + { + name : 'Sunday', + value: 294 + } + ] + }, + widget3: { + impressions: { + value : '87.4M', + ofTarget: 12.3 + }, + scheme : { + domain: ['#5c84f1'] + }, + data : [ + { + name : 'Impressions', + series: [ + { + name : 'Jan 1', + value: 670000 + }, + { + name : 'Jan 2', + value: 540000 + }, + { + name : 'Jan 3', + value: 820000 + }, + { + name : 'Jan 4', + value: 570000 + }, + { + name : 'Jan 5', + value: 720000 + }, + { + name : 'Jan 6', + value: 570000 + }, + { + name : 'Jan 7', + value: 870000 + }, + { + name : 'Jan 8', + value: 720000 + }, + { + name : 'Jan 9', + value: 890000 + }, + { + name : 'Jan 10', + value: 987000 + }, + { + name : 'Jan 11', + value: 1120000 + }, + { + name : 'Jan 12', + value: 1360000 + }, + { + name : 'Jan 13', + value: 1100000 + }, + { + name : 'Jan 14', + value: 1490000 + }, + { + name : 'Jan 15', + value: 980000 + } + ] + } + ] + }, + widget4: { + visits: { + value : 882, + ofTarget: -12 + }, + scheme: { + domain: ['#f44336'] + }, + data : [ + { + name : 'Monday', + value: 432 + }, + { + name : 'Tuesday', + value: 428 + }, + { + name : 'Wednesday', + value: 477 + }, + { + name : 'Thursday', + value: 471 + }, + { + name : 'Friday', + value: 456 + }, + { + name : 'Saturday', + value: 267 + }, + { + name : 'Sunday', + value: 231 + } + ] + }, + widget5: { + chartType: 'line', + datasets : { + 'yesterday': [ + { + label: 'Visitors', + data : [190, 300, 340, 220, 290, 390, 250, 380, 410, 380, 320, 290], + fill : 'start' + + }, + { + label: 'Page views', + data : [2200, 2900, 3900, 2500, 3800, 3200, 2900, 1900, 3000, 3400, 4100, 3800], + fill : 'start' + } + ], + 'today' : [ + { + label: 'Visitors', + data : [410, 380, 320, 290, 190, 390, 250, 380, 300, 340, 220, 290], + fill : 'start' + }, + { + label: 'Page Views', + data : [3000, 3400, 4100, 3800, 2200, 3200, 2900, 1900, 2900, 3900, 2500, 3800], + fill : 'start' + + } + ] + }, + labels : ['12am', '2am', '4am', '6am', '8am', '10am', '12pm', '2pm', '4pm', '6pm', '8pm', '10pm'], + colors : [ + { + borderColor : '#3949ab', + backgroundColor : '#3949ab', + pointBackgroundColor : '#3949ab', + pointHoverBackgroundColor: '#3949ab', + pointBorderColor : '#ffffff', + pointHoverBorderColor : '#ffffff' + }, + { + borderColor : 'rgba(30, 136, 229, 0.87)', + backgroundColor : 'rgba(30, 136, 229, 0.87)', + pointBackgroundColor : 'rgba(30, 136, 229, 0.87)', + pointHoverBackgroundColor: 'rgba(30, 136, 229, 0.87)', + pointBorderColor : '#ffffff', + pointHoverBorderColor : '#ffffff' + } + ], + options : { + spanGaps : false, + legend : { + display: false + }, + maintainAspectRatio: false, + tooltips : { + position : 'nearest', + mode : 'index', + intersect: false + }, + layout : { + padding: { + left : 24, + right: 32 + } + }, + elements : { + point: { + radius : 4, + borderWidth : 2, + hoverRadius : 4, + hoverBorderWidth: 2 + } + }, + scales : { + xAxes: [ + { + gridLines: { + display: false + }, + ticks : { + fontColor: 'rgba(0,0,0,0.54)' + } + } + ], + yAxes: [ + { + gridLines: { + tickMarkLength: 16 + }, + ticks : { + stepSize: 1000 + } + } + ] + }, + plugins : { + filler: { + propagate: false + } + } + } + }, + widget6: { + markers: [ + { + lat: 52, + lng: -73, + label: '120' + }, + { + lat: 37, + lng: -104, + label: '498' + }, + { + lat: 21, + lng: -7, + label: '443' + }, + { + lat: 55, + lng: 75, + label: '332' + }, + { + lat: 51, + lng: 7, + label: '50' + }, + { + lat: 31, + lng: 12, + label: '221' + }, + { + lat: 45, + lng: 44, + label: '455' + }, + { + lat: -26, + lng: 134, + label: '231' + }, + { + lat: -9, + lng: -60, + label: '67' + }, + { + lat: 33, + lng: 104, + label: '665' + } + ] + }, + widget7: { + scheme : { + domain: ['#4867d2', '#5c84f1', '#89a9f4'] + }, + devices: [ + { + name : 'Desktop', + value : 92.8, + change: -0.6 + }, + { + name : 'Mobile', + value : 6.1, + change: 0.7 + }, + { + name : 'Tablet', + value : 1.1, + change: 0.1 + } + ] + }, + widget8: { + scheme : { + domain: ['#5c84f1'] + }, + today : '12,540', + change : { + value : 321, + percentage: 2.05 + }, + data : [ + { + name : 'Sales', + series: [ + { + name : 'Jan 1', + value: 540 + }, + { + name : 'Jan 2', + value: 539 + }, + { + name : 'Jan 3', + value: 538 + }, + { + name : 'Jan 4', + value: 539 + }, + { + name : 'Jan 5', + value: 540 + }, + { + name : 'Jan 6', + value: 539 + }, + { + name : 'Jan 7', + value: 540 + } + ] + } + ], + dataMin: 538, + dataMax: 541 + }, + widget9: { + rows: [ + { + title : 'Holiday Travel', + clicks : 3621, + conversion: 90 + }, + { + title : 'Get Away Deals', + clicks : 703, + conversion: 7 + }, + { + title : 'Airfare', + clicks : 532, + conversion: 0 + }, + { + title : 'Vacation', + clicks : 201, + conversion: 8 + }, + { + title : 'Hotels', + clicks : 94, + conversion: 4 + } + ] + } + }; +} diff --git a/src/app/fuse-fake-db/projects-dashboard.ts b/src/app/fuse-fake-db/dashboard-project.ts similarity index 99% rename from src/app/fuse-fake-db/projects-dashboard.ts rename to src/app/fuse-fake-db/dashboard-project.ts index 1e520440..8ca46d0b 100644 --- a/src/app/fuse-fake-db/projects-dashboard.ts +++ b/src/app/fuse-fake-db/dashboard-project.ts @@ -1,4 +1,4 @@ -export class ProjectsDashboardDb +export class ProjectDashboardDb { public static projects = [ { diff --git a/src/app/fuse-fake-db/fuse-fake-db.service.ts b/src/app/fuse-fake-db/fuse-fake-db.service.ts index 41206e23..e54dd9bc 100644 --- a/src/app/fuse-fake-db/fuse-fake-db.service.ts +++ b/src/app/fuse-fake-db/fuse-fake-db.service.ts @@ -1,62 +1,97 @@ import { InMemoryDbService } from 'angular-in-memory-web-api'; -import { MailFakeDb } from './mail'; -import { ChatFakeDb } from './chat'; +import { ProjectDashboardDb } from './dashboard-project'; +import { AnalyticsDashboardDb } from './dashboard-analytics'; import { CalendarFakeDb } from './calendar'; -import { TodoFakeDb } from './todo'; -import { ProfileFakeDb } from './profile'; -import { ContactsFakeDb } from './contacts'; -import { InvoiceFakeDb } from './invoice'; -import { FileManagerFakeDb } from './file-manager'; -import { SearchFakeDb } from './search'; -import { QuickPanelFakeDb } from './quick-panel'; -import { IconsFakeDb } from './icons'; -import { ProjectsDashboardDb } from './projects-dashboard'; -import { ScrumboardFakeDb } from './scrumboard'; -import { FaqFakeDb } from './faq'; -import { KnowledgeBaseFakeDb } from './knowledge-base'; import { ECommerceFakeDb } from './e-commerce'; import { AcademyFakeDb } from './academy'; +import { MailFakeDb } from './mail'; +import { ChatFakeDb } from './chat'; +import { FileManagerFakeDb } from './file-manager'; +import { ContactsFakeDb } from './contacts'; +import { TodoFakeDb } from './todo'; +import { ScrumboardFakeDb } from './scrumboard'; +import { InvoiceFakeDb } from './invoice'; +import { ProfileFakeDb } from './profile'; +import { SearchFakeDb } from './search'; +import { FaqFakeDb } from './faq'; +import { KnowledgeBaseFakeDb } from './knowledge-base'; +import { IconsFakeDb } from './icons'; +import { QuickPanelFakeDb } from './quick-panel'; export class FuseFakeDbService implements InMemoryDbService { createDb() { return { - 'mail-mails' : MailFakeDb.mails, - 'mail-folders' : MailFakeDb.folders, - 'mail-filters' : MailFakeDb.filters, - 'mail-labels' : MailFakeDb.labels, - 'chat-contacts' : ChatFakeDb.contacts, - 'chat-chats' : ChatFakeDb.chats, - 'chat-user' : ChatFakeDb.user, - 'calendar' : CalendarFakeDb.data, - 'todo-todos' : TodoFakeDb.todos, - 'todo-filters' : TodoFakeDb.filters, - 'todo-tags' : TodoFakeDb.tags, - 'profile-timeline' : ProfileFakeDb.timeline, - 'profile-photos-videos' : ProfileFakeDb.photosVideos, - 'profile-about' : ProfileFakeDb.about, - 'contacts-contacts' : ContactsFakeDb.contacts, - 'contacts-user' : ContactsFakeDb.user, - 'invoice' : InvoiceFakeDb.invoice, - 'file-manager' : FileManagerFakeDb.files, - 'search-classic' : SearchFakeDb.classic, - 'search-table' : SearchFakeDb.table, - 'quick-panel-notes' : QuickPanelFakeDb.notes, - 'quick-panel-events' : QuickPanelFakeDb.events, - 'icons' : IconsFakeDb.icons, - 'projects-dashboard-projects': ProjectsDashboardDb.projects, - 'projects-dashboard-widgets' : ProjectsDashboardDb.widgets, - 'scrumboard-boards' : ScrumboardFakeDb.boards, - 'faq' : FaqFakeDb.data, - 'knowledge-base' : KnowledgeBaseFakeDb.data, - 'e-commerce-dashboard' : ECommerceFakeDb.dashboard, - 'e-commerce-products' : ECommerceFakeDb.products, - 'e-commerce-orders' : ECommerceFakeDb.orders, - 'academy-categories' : AcademyFakeDb.categories, - 'academy-courses' : AcademyFakeDb.courses, - 'academy-course' : AcademyFakeDb.course + // Dashboards + 'project-dashboard-projects' : ProjectDashboardDb.projects, + 'project-dashboard-widgets' : ProjectDashboardDb.widgets, + 'analytics-dashboard-widgets': AnalyticsDashboardDb.widgets, + + // Calendar + 'calendar': CalendarFakeDb.data, + + // E-Commerce + 'e-commerce-dashboard': ECommerceFakeDb.dashboard, + 'e-commerce-products' : ECommerceFakeDb.products, + 'e-commerce-orders' : ECommerceFakeDb.orders, + + // Academy + 'academy-categories': AcademyFakeDb.categories, + 'academy-courses' : AcademyFakeDb.courses, + 'academy-course' : AcademyFakeDb.course, + + // Mail + 'mail-mails' : MailFakeDb.mails, + 'mail-folders': MailFakeDb.folders, + 'mail-filters': MailFakeDb.filters, + 'mail-labels' : MailFakeDb.labels, + + // Chat + 'chat-contacts': ChatFakeDb.contacts, + 'chat-chats' : ChatFakeDb.chats, + 'chat-user' : ChatFakeDb.user, + + // File Manager + 'file-manager': FileManagerFakeDb.files, + + // Contacts + 'contacts-contacts': ContactsFakeDb.contacts, + 'contacts-user' : ContactsFakeDb.user, + + // Todo + 'todo-todos' : TodoFakeDb.todos, + 'todo-filters': TodoFakeDb.filters, + 'todo-tags' : TodoFakeDb.tags, + + // Scrumboard + 'scrumboard-boards': ScrumboardFakeDb.boards, + + // Invoice + 'invoice': InvoiceFakeDb.invoice, + + // Profile + 'profile-timeline' : ProfileFakeDb.timeline, + 'profile-photos-videos': ProfileFakeDb.photosVideos, + 'profile-about' : ProfileFakeDb.about, + + // Search + 'search-classic': SearchFakeDb.classic, + 'search-table' : SearchFakeDb.table, + + // FAQ + 'faq': FaqFakeDb.data, + + // Knowledge base + 'knowledge-base': KnowledgeBaseFakeDb.data, + + // Icons + 'icons': IconsFakeDb.icons, + + // Quick Panel + 'quick-panel-notes' : QuickPanelFakeDb.notes, + 'quick-panel-events': QuickPanelFakeDb.events }; } } diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html index e4c879a9..a93f76fb 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.html +++ b/src/app/main/content/apps/dashboards/project/project.component.html @@ -10,7 +10,9 @@
- Welcome back, John! + Welcome back, John! + @@ -41,16 +44,20 @@ -
+
- +
-
+
- @@ -67,12 +74,17 @@
{{widgets.widget1.data.count[widgets.widget1.currentRange]}}
-
{{widgets.widget1.data.label}}
+
{{widgets.widget1.data.label}} +
- {{widgets.widget1.data.extra.label}}: - {{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}} + + {{widgets.widget1.data.extra.label}}: + + + {{widgets.widget1.data.extra.count[widgets.widget1.currentRange]}} +
@@ -94,14 +106,17 @@ - +
-
+
{{widgets.widget2.title}}
-
@@ -110,11 +125,14 @@
{{widgets.widget2.data.count}}
-
{{widgets.widget2.data.label}}
+
{{widgets.widget2.data.label}} +
- {{widgets.widget2.data.extra.label}}: + + {{widgets.widget2.data.extra.label}}: + {{widgets.widget2.data.extra.count}}
@@ -137,14 +155,17 @@ - +
-
+
{{widgets.widget3.title}}
-
@@ -153,11 +174,14 @@
{{widgets.widget3.data.count}}
-
{{widgets.widget3.data.label}}
+
{{widgets.widget3.data.label}} +
- {{widgets.widget3.data.extra.label}}: + + {{widgets.widget3.data.extra.label}}: + {{widgets.widget3.data.extra.count}}
@@ -180,26 +204,33 @@ - +
-
+
{{widgets.widget4.title}}
-
-
{{widgets.widget4.data.count}} +
+ {{widgets.widget4.data.count}} +
+
{{widgets.widget4.data.label}}
-
{{widgets.widget4.data.label}}
- {{widgets.widget4.data.extra.label}}: + + {{widgets.widget4.data.extra.label}}: + {{widgets.widget4.data.extra.count}}
@@ -221,18 +252,19 @@ - - +
-
+
-
{{widgets.widget5.title}}
+
{{widgets.widget5.title}}
-
+
-
-
+
+ +
-
+
+ *ngFor="let widget of widgets.widget5.supporting | keys" + class="mb-24">
{{widget.value.label}}
@@ -297,17 +332,19 @@ - - +
-
+
{{widgets.widget6.title}}
- + {{range.value}} @@ -330,14 +367,21 @@
-
-
- {{widgets.widget6.footerLeft.count[widget6.currentRange]}} +
+
+ + {{widgets.widget6.footerLeft.count[widget6.currentRange]}} + {{widgets.widget6.footerLeft.title}}
-
- {{widgets.widget6.footerRight.count[widget6.currentRange]}} +
+ + {{widgets.widget6.footerRight.count[widget6.currentRange]}} + {{widgets.widget6.footerRight.title}}
@@ -349,12 +393,14 @@ - +
-
+
{{widgets.widget7.title}}
- -
+
- +
-
+
{{widgets.widget8.title}}
@@ -431,11 +478,13 @@ - +
-
+
{{widgets.widget9.title}}
@@ -447,7 +496,7 @@
-
{{widgets.widget9.weeklySpent.title}}
@@ -474,7 +523,7 @@
-
{{widgets.widget9.totalSpent.title}}
@@ -501,7 +550,7 @@
-
{{widgets.widget9.remaining.title}}
@@ -528,7 +577,7 @@
-
+
{{widgets.widget9.totalBudget.title}}
$ @@ -543,7 +592,8 @@ - +
@@ -569,7 +619,8 @@ {{cell.value}} - {{cell.icon}} + {{cell.icon}} + @@ -590,17 +641,21 @@ -
+
- +
-
+
{{widgets.widget11.title}}
-
{{widgets.widget11.table.rows.length}} +
+ {{widgets.widget11.table.rows.length}} members
@@ -620,13 +675,15 @@ Name -

{{contact.name}} {{contact.lastName}}

+

{{contact.name}} + {{contact.lastName}}

 - Position + Position +

{{contact.position}} @@ -636,7 +693,8 @@ - Office + Office +

{{contact.office}} @@ -644,10 +702,10 @@ - - Email + Email +

{{contact.phone}} @@ -665,7 +724,8 @@ - + @@ -688,7 +748,8 @@ - +

@@ -768,7 +829,8 @@
- {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].temp[widgets.weatherWidget.tempUnit]}} @@ -789,12 +851,16 @@
- {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}} + + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].windDirection}} +
- {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}} + + {{widgets.weatherWidget.locations[widgets.weatherWidget.currentLocation].rainProbability}} +
@@ -806,7 +872,9 @@ {{day.temp[widgets.weatherWidget.tempUnit]}} ° - {{widgets.weatherWidget.tempUnit}} + + {{widgets.weatherWidget.tempUnit}} +
diff --git a/src/app/main/content/apps/dashboards/project/project.component.scss b/src/app/main/content/apps/dashboards/project/project.component.scss index 75e7b0a1..62b6e31e 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.scss +++ b/src/app/main/content/apps/dashboards/project/project.component.scss @@ -56,5 +56,15 @@ min-width: 250px !important; max-width: 250px !important; } + + .widget { + + &.widget5 { + + .gridline-path.gridline-path-horizontal { + display: none; + } + } + } } } diff --git a/src/app/main/content/apps/dashboards/project/project.component.ts b/src/app/main/content/apps/dashboards/project/project.component.ts index 9c2b6c72..3f839db3 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.ts +++ b/src/app/main/content/apps/dashboards/project/project.component.ts @@ -1,19 +1,20 @@ import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; -import { ProjectsDashboardService } from './projects.service'; import * as shape from 'd3-shape'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { Observable } from 'rxjs/Observable'; import { DataSource } from '@angular/cdk/collections'; + +import { ProjectDashboardService } from './project.service'; import { fuseAnimations } from '../../../../../core/animations'; @Component({ - selector : 'fuse-project', + selector : 'fuse-project-dashboard', templateUrl : './project.component.html', styleUrls : ['./project.component.scss'], encapsulation: ViewEncapsulation.None, animations : fuseAnimations }) -export class FuseProjectComponent implements OnInit, OnDestroy +export class FuseProjectDashboardComponent implements OnInit, OnDestroy { projects: any[]; selectedProject: any; @@ -28,13 +29,11 @@ export class FuseProjectComponent implements OnInit, OnDestroy dateNow = Date.now(); - constructor(private projectsDashboardService: ProjectsDashboardService) + constructor(private projectDashboardService: ProjectDashboardService) { - this.projects = this.projectsDashboardService.projects; - + this.projects = this.projectDashboardService.projects; this.selectedProject = this.projects[0]; - - this.widgets = this.projectsDashboardService.widgets; + this.widgets = this.projectDashboardService.widgets; /** * Widget 5 diff --git a/src/app/main/content/apps/dashboards/project/project.module.ts b/src/app/main/content/apps/dashboards/project/project.module.ts index 95816a25..f2d40046 100644 --- a/src/app/main/content/apps/dashboards/project/project.module.ts +++ b/src/app/main/content/apps/dashboards/project/project.module.ts @@ -1,17 +1,18 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { FuseProjectComponent } from './project.component'; import { SharedModule } from '../../../../../core/modules/shared.module'; -import { ProjectsDashboardService } from './projects.service'; + +import { FuseProjectDashboardComponent } from './project.component'; +import { ProjectDashboardService } from './project.service'; import { FuseWidgetModule } from '../../../../../core/components/widget/widget.module'; import { NgxChartsModule } from '@swimlane/ngx-charts'; const routes: Routes = [ { path : '**', - component: FuseProjectComponent, + component: FuseProjectDashboardComponent, resolve : { - data: ProjectsDashboardService + data: ProjectDashboardService } } ]; @@ -24,10 +25,10 @@ const routes: Routes = [ NgxChartsModule ], declarations: [ - FuseProjectComponent + FuseProjectDashboardComponent ], providers : [ - ProjectsDashboardService + ProjectDashboardService ] }) export class FuseProjectDashboardModule diff --git a/src/app/main/content/apps/dashboards/project/project.service.ts b/src/app/main/content/apps/dashboards/project/project.service.ts new file mode 100644 index 00000000..3489f3b3 --- /dev/null +++ b/src/app/main/content/apps/dashboards/project/project.service.ts @@ -0,0 +1,62 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; +import { Observable } from 'rxjs/Observable'; +import { HttpClient } from '@angular/common/http'; + +@Injectable() +export class ProjectDashboardService implements Resolve +{ + projects: any[]; + widgets: any[]; + + constructor( + private http: HttpClient + ) + { + } + + /** + * Resolve + * @param {ActivatedRouteSnapshot} route + * @param {RouterStateSnapshot} state + * @returns {Observable | Promise | any} + */ + resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any + { + + return new Promise((resolve, reject) => { + + Promise.all([ + this.getProjects(), + this.getWidgets() + ]).then( + () => { + resolve(); + }, + reject + ); + }); + } + + getProjects(): Promise + { + return new Promise((resolve, reject) => { + this.http.get('api/project-dashboard-projects') + .subscribe((response: any) => { + this.projects = response; + resolve(response); + }, reject); + }); + } + + getWidgets(): Promise + { + return new Promise((resolve, reject) => { + this.http.get('api/project-dashboard-widgets') + .subscribe((response: any) => { + this.widgets = response; + resolve(response); + }, reject); + }); + } +}