More placeholder code for customer dashboard

src/app/app.module.ts

@@ -21,7 +21,9 @@ import { CustomerGuard } from './_guards/customer.guard';
 import { ApiService } from './providers/api-service';
 
 import { OrgGraphsService } from './providers/org-graphs.service';
+import { CustGraphsService } from './providers/cust-graphs.service';
 import { OrgSnippetsService } from './providers/org-snippets.service';
+import { CustSnippetsService } from './providers/cust-snippets.service';
 
 // Layouts
 import { FullLayoutComponent } from './layouts/full-layout.component';
@@ -65,6 +67,8 @@ import { DashboardModule } from './dashboard/dashboard.module';
     ApiService,
     OrgGraphsService,
     OrgSnippetsService,
+    CustGraphsService,
+    CustSnippetsService,
     {
       provide: LocationStrategy,
       useClass: HashLocationStrategy

src/app/dashboard/dashboard-customer.component.html

@@ -1,131 +1,13 @@
 <div class="animated fadeIn">
-  <div class="card">
+  <snippet-bar-cust></snippet-bar-cust>
-    <div class="card-footer">
-      <ul>
-        <li>
-          <div class="text-muted">My Points</div>
-          <strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong>
-        </li>
-        <li>
-          <div class="text-muted">My Rank</div>
-            <div *ngIf="basicStats.user_position == 0" class="statuscontent">
-              <strong>Unranked</strong>
-            </div>
-    				<div *ngIf="basicStats.user_position != 0" class="statuscontent">
-    					<strong>{{ basicStats.user_position }}</strong>
-    				</div>
-        </li>
-      </ul>
-      </div>
-      <div class="card-footer">
-        <ul>
-        <li>
-          <div class="text-muted">My Total Spend</div>
-          <strong>{{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }}</strong>
-        </li>
-        <li>
-          <div class="text-muted">Value to Local Economy</div>
-          <strong>{{ basicStats.user_sum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong>
-        </li>
-      </ul>
-    </div>
-  </div>
   <div class="row">
-    <div class="col-sm-6 col-lg-3">
+    <div *ngFor="let widget of widgetList" class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
+      <widget-graph *ngIf="widget.type == 'graph'"
-        <div class="card-block">
+                    [graphName]="widget.name"
-          <div class="h4 mb-0">{{ basicStats.today_sum | currency:'GBP':'symbol':'1.2-2' }}</div>
+                    [graphTitle]="widget.title"
-          <div>Total Today</div>
+                    [graphIcon]="widget.icon"
-          <!-- <div class="progress progress-white progress-xs mt-3">
+                    [dataType]="widget.dataType">
-            <div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
+      </widget-graph>
-          </div>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block">
-          <div class="h4 mb-0">{{ basicStats.today_sum / (basicStats.today_count ? basicStats.today_count : 1) | currency:'GBP':'symbol':'1.2-2' }}</div>
-          <div>Avg. Spend Today</div>
-          <!-- <div class="progress progress-white progress-xs mt-3">
-            <div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block">
-          <div class="h4 mb-0">{{ basicStats.week_sum | currency:'GBP':'symbol':'1.2-2' }}</div>
-          <div>Last Week Total</div>
-          <!-- <div class="progress progress-white progress-xs mt-3">
-            <div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block">
-          <div class="h4 mb-0">{{ basicStats.week_sum / (basicStats.week_count ? basicStats.week_count : 1) | currency:'GBP':'symbol':'1.2-2' }}</div>
-          <div>Last Week Avg. Spend</div>
-          <!-- <div class="progress progress-white progress-xs mt-3">
-            <div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block">
-          <div class="h4 mb-0">{{ basicStats.month_sum | currency:'GBP':'symbol':'1.2-2' }}</div>
-          <div>Last Month Total</div>
-          <!-- <div class="progress progress-white progress-xs mt-3">
-            <div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block">
-          <div class="h4 mb-0">{{ basicStats.month_sum / (basicStats.month_count ? basicStats.month_count : 1) | currency:'GBP':'symbol':'1.2-2' }}</div>
-          <div>Last Month Avg. Spend</div>
-          <!-- <div class="progress progress-white progress-xs mt-3">
-            <div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block">
-          <div class="h4 mb-0">{{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }}</div>
-          <div>User Total</div>
-          <!-- <div class="progress progress-white progress-xs mt-3">
-            <div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block">
-          <div class="h4 mb-0">{{ basicStats.user_sum / (basicStats.user_count ? basicStats.user_count : 1) | currency:'GBP':'symbol':'1.2-2' }}</div>
-          <div>User Avg. Spend</div>
-          <!-- <div class="progress progress-white progress-xs mt-3">
-            <div class="progress-bar" role="progressbar" style="width: 100%" attr.aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
-          </div>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small> -->
-        </div>
-      </div>
     </div><!--/.col-->
   </div><!--/.row-->
 </div>

src/app/dashboard/dashboard-customer.component.ts

@@ -2,6 +2,8 @@ import { Directive, Component, OnInit } from '@angular/core';
 import { ApiService } from '../providers/api-service';
 import { Router } from '@angular/router';
 import { GraphWidget } from '../widgets/graph-widget.component';
+import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component';
+import { DataType } from '../shared/data-types.enum';
 
 @Component({
   templateUrl: 'dashboard-customer.component.html'
@@ -20,32 +22,62 @@ export class DashboardCustomerComponent implements OnInit {
   myRank: any;
   username: any;
 
-  basicStats = {
+  public widgetList = [
-    today_sum: 0,
+    {
-    today_count: 0,
+      type: 'graph',
-    week_sum: 0,
+      name: 'total_today',
-    week_count: 0,
+      title: 'Total Today',
-    month_sum: 0,
+      dataType: DataType.currency,
-    month_count: 0,
+    },
-    user_sum: 0,
+    {
-    user_count: 0,
+      type: 'graph',
-    global_sum: 0,
+      name: 'avg_spend_today',
-    global_count: 0,
+      title: 'Avg. Spend Today',
-    user_position: 0,
+      dataType: DataType.currency,
-  };
+    },
+    {
+      type: 'graph',
+      name: 'total_last_week',
+      icon: 'icon-diamond',
+      title: 'Last Week Total',
+      dataType: DataType.currency,
+    },
+    {
+      type: 'graph',
+      name: 'avg_spend_last_week',
+      icon: 'icon-diamond',
+      title: 'Last Week Avg. Spend',
+      dataType: DataType.currency,
+    },
+    {
+      type: 'graph',
+      name: 'total_last_month',
+      title: 'Last Month Total',
+      dataType: DataType.currency,
+    },
+    {
+      type: 'graph',
+      name: 'avg_spend_last_month',
+      title: 'Last Month Avg. Spend',
+      dataType: DataType.currency,
+    },
+    {
+      type: 'graph',
+      name: 'total_user',
+      title: 'User Total',
+      dataType: DataType.currency,
+    },
+    {
+      type: 'graph',
+      name: 'avg_spend_user',
+      title: 'User Avg. Spend',
+      dataType: DataType.currency,
+    },
+  ];
 
   constructor(
   private api: ApiService,
   ) {
-    this.api.basicStats().subscribe(
-      result => {
-        this.basicStats = result;
-      },
-      error => {
-        console.log('Retrieval Error');
-        console.log( error._body );
-      }
-    );
   }
 
   ngOnInit(): void {

src/app/dashboard/dashboard.component.html

@@ -6,7 +6,8 @@
                     [graphName]="widget.name"
                     [graphTitle]="widget.title"
                     [graphIcon]="widget.icon"
-                    [dataType]="widget.dataType"></widget-graph>
+                    [dataType]="widget.dataType">
+      </widget-graph>
     </div><!--/.col-->
   </div><!--/.row-->
   <panel-graph></panel-graph>

src/app/dashboard/dashboard.module.ts

@@ -23,6 +23,7 @@ import { TrailMapComponent } from './trail-map.component';
 
 import { GraphWidget } from '../widgets/graph-widget.component';
 import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
+import { CustBarSnippetComponent } from '../snippets/cust-snippet-bar.component';
 import { GraphPanel } from '../panels/graph-panel.component';
 
 import { DashboardRoutingModule } from './dashboard.routing';
@@ -69,6 +70,7 @@ import { environment } from '../../environments/environment';
     FeedbackComponent,
     GraphWidget,
     OrgBarSnippetComponent,
+    CustBarSnippetComponent,
     GraphPanel,
   ],
   providers: [

src/app/providers/cust-graphs.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { ApiService } from './api-service';
+
+@Injectable()
+export class CustGraphsService {
+  private custGraphUrl = '/v1/customer/graphs';
+
+  constructor(private api: ApiService) { }
+
+  public getGraph(name: string, data: any = {}) {
+    data.graph = name;
+    return this.api.post(this.custGraphUrl, data);
+  }
+}

src/app/providers/cust-snippets.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { ApiService } from './api-service';
+import { Observable } from 'rxjs/Rx';
+
+@Injectable()
+export class CustSnippetsService {
+  private orgSnippetsUrl = '/v1/organisation/snippets';
+
+  constructor(private api: ApiService) { }
+
+  // This endpoint should mimic basicStats
+  public getData(): Observable<any> {
+    return this.api.post(this.orgSnippetsUrl);
+  }
+}

src/app/snippets/cust-snippet-bar.component.html

@@ -0,0 +1,27 @@
+<div class="card">
+  <div class="card-footer">
+    <ul>
+      <li class="hidden-sm-down">
+        <div class="text-muted">My Points</div>
+        <strong>{{ basicStats.user_sum / 10 | number:'1.0-0' }}</strong>
+      </li>
+      <li class="hidden-sm-down">
+        <div class="text-muted">My Rank</div>
+        <div *ngIf="basicStats.user_position == 0" class="statuscontent">
+          <strong>Unranked</strong>
+        </div>
+        <div *ngIf="basicStats.user_position != 0" class="statuscontent">
+          <strong>{{ basicStats.user_position }}</strong>
+        </div>
+      </li>
+      <li class="hidden-sm-down">
+        <div class="text-muted">My Total Spend</div>
+        <strong>{{ basicStats.user_sum | currency:'GBP':'symbol':'1.2-2' }}</strong>
+      </li>
+      <li class="hidden-sm-down">
+        <div class="text-muted">Value to Local Economy</div>
+        <strong>{{ basicStats.user_sum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong>
+      </li>
+    </ul>
+  </div>
+</div>

src/app/snippets/cust-snippet-bar.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { OrgSnippetsService } from '../providers/org-snippets.service';
+
+@Component({
+  selector: 'snippet-bar-cust',
+  templateUrl: 'cust-snippet-bar.component.html',
+})
+export class CustBarSnippetComponent implements OnInit {
+
+  public thisMonthSalesCount = 0;
+  public thisMonthSalesTotal = 0;
+  public thisWeekSalesCount = 0;
+  public thisWeekSalesTotal = 0;
+  public todaySalesCount = 0;
+  public todaySalesTotal = 0;
+
+  public thisMonthPurchasesCount = 0;
+  public thisMonthPurchasesTotal = 0;
+  public thisWeekPurchasesCount = 0;
+  public thisWeekPurchasesTotal = 0;
+  public todayPurchasesCount = 0;
+  public todayPurchasesTotal = 0;
+
+  constructor(
+    private snippetsService: OrgSnippetsService,
+  ) { }
+
+  public ngOnInit(): void {
+    this.snippetsService.getData()
+      .subscribe(
+        result => {
+          this.thisMonthSalesCount = result.snippets.this_month_sales_count;
+          this.thisMonthSalesTotal = result.snippets.this_month_sales_total;
+          this.thisWeekSalesCount  = result.snippets.this_week_sales_count;
+          this.thisWeekSalesTotal  = result.snippets.this_week_sales_total;
+          this.todaySalesCount     = result.snippets.today_sales_count;
+          this.todaySalesTotal     = result.snippets.today_sales_total;
+
+          this.thisMonthPurchasesCount = result.snippets.this_week_purchases_count;
+          this.thisMonthPurchasesTotal = result.snippets.this_week_purchases_total;
+          this.thisWeekPurchasesCount  = result.snippets.this_month_purchases_count;
+          this.thisWeekPurchasesTotal  = result.snippets.this_month_purchases_total;
+          this.todayPurchasesCount     = result.snippets.today_purchases_count;
+          this.todayPurchasesTotal     = result.snippets.today_purchases_total;
+        }
+      );
+  }
+}