From 5d16cc02855f72f63d5d3466f36e6854bd6b6936 Mon Sep 17 00:00:00 2001
From: piratefinn <toyou1995@gmail.com>
Date: Tue, 4 Jul 2017 17:19:26 +0100
Subject: [PATCH] dashboard boxes ideable NEEDS FIXING

---
 src/app/dashboard/dashboard.component.html | 210 +++++++++++----------
 src/app/dashboard/dashboard.component.ts   |   7 +
 src/app/providers/api-service.ts           |  13 +-
 3 files changed, 127 insertions(+), 103 deletions(-)

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index 1e97ae8..c53a96f 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -22,115 +22,123 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-primary">
-        <div class="card-block pb-0">
-          <div class="btn-group float-right" dropdown>
-            <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
-              <i class="icon-settings"></i>
-            </button>
-            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
+    <div *ngIf="showGraph.customersthisweekgraph">
+      <div class="col-sm-6 col-lg-3">
+        <div class="card card-inverse card-primary">
+          <div class="card-block pb-0">
+            <div class="btn-group float-right" dropdown>
+              <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
+                <i class="icon-settings"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <a class="dropdown-item" href="#">Something else here</a>
+              </div>
             </div>
+            <h4 class="mb-0">138</h4>
+            <p>Customers this week</p>
+          </div>
+          <div class="chart-wrapper px-3" style="height:70px;">
+            <canvas baseChart class="chart"
+            [datasets]="lineChart1Data"
+            [labels]="lineChart1Labels"
+            [options]="lineChart1Options"
+            [colors]="lineChart1Colours"
+            [legend]="lineChart1Legend"
+            [chartType]="lineChart1Type"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
           </div>
-          <h4 class="mb-0">138</h4>
-          <p>Customers this week</p>
         </div>
-        <div class="chart-wrapper px-3" style="height:70px;">
-          <canvas baseChart class="chart"
-          [datasets]="lineChart1Data"
-          [labels]="lineChart1Labels"
-          [options]="lineChart1Options"
-          [colors]="lineChart1Colours"
-          [legend]="lineChart1Legend"
-          [chartType]="lineChart1Type"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-info">
-        <div class="card-block pb-0">
-          <button type="button" class="btn btn-transparent p-0 float-right">
-            <i class="icon-location-pin"></i>
-          </button>
-          <h4 class="mb-0">9.823</h4>
-          <p>Customers last week</p>
-        </div>
-        <div class="chart-wrapper px-3" style="height:70px;">
-          <canvas baseChart class="chart"
-          [datasets]="lineChart2Data"
-          [labels]="lineChart2Labels"
-          [options]="lineChart2Options"
-          [colors]="lineChart2Colours"
-          [legend]="lineChart2Legend"
-          [chartType]="lineChart2Type"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-warning">
-        <div class="card-block pb-0">
-          <div class="btn-group float-right">
-            <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <i class="icon-settings"></i>
+      </div><!--/.col-->
+    </div>
+    <div *ngIf="showGraph.customerslastweekgraph">
+      <div class="col-sm-6 col-lg-3">
+        <div class="card card-inverse card-info">
+          <div class="card-block pb-0">
+            <button type="button" class="btn btn-transparent p-0 float-right">
+              <i class="icon-location-pin"></i>
             </button>
-            <div class="dropdown-menu dropdown-menu-right">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
+            <h4 class="mb-0">9.823</h4>
+            <p>Customers last week</p>
           </div>
-          <h4 class="mb-0">9.823</h4>
-          <p>Points earned this week</p>
-        </div>
-        <div class="chart-wrapper" style="height:70px;">
-          <canvas baseChart class="chart"
-          [datasets]="lineChart3Data"
-          [labels]="lineChart3Labels"
-          [options]="lineChart3Options"
-          [colors]="lineChart3Colours"
-          [legend]="lineChart3Legend"
-          [chartType]="lineChart3Type"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
-        </div>
-      </div>
-    </div><!--/.col-->
-    <div class="col-sm-6 col-lg-3">
-      <div class="card card-inverse card-danger">
-        <div class="card-block pb-0">
-          <div class="btn-group float-right" dropdown>
-            <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
-              <i class="icon-settings"></i>
-            </button>
-            <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
+          <div class="chart-wrapper px-3" style="height:70px;">
+            <canvas baseChart class="chart"
+            [datasets]="lineChart2Data"
+            [labels]="lineChart2Labels"
+            [options]="lineChart2Options"
+            [colors]="lineChart2Colours"
+            [legend]="lineChart2Legend"
+            [chartType]="lineChart2Type"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
           </div>
-          <h4 class="mb-0">9.823</h4>
-          <p>Points earned last week</p>
         </div>
-        <div class="chart-wrapper px-3" style="height:70px;">
-          <canvas baseChart class="chart"
-          [datasets]="barChart1Data"
-          [labels]="barChart1Labels"
-          [options]="barChart1Options"
-          [colors]="barChart1Colours"
-          [legend]="barChart1Legend"
-          [chartType]="barChart1Type"
-          (chartHover)="chartHovered($event)"
-          (chartClick)="chartClicked($event)"></canvas>
+      </div><!--/.col-->
+    </div>
+    <div *ngIf="showGraph.pointsthisweekgraph">
+      <div class="col-sm-6 col-lg-3">
+        <div class="card card-inverse card-warning">
+          <div class="card-block pb-0">
+            <div class="btn-group float-right">
+              <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <i class="icon-settings"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <a class="dropdown-item" href="#">Something else here</a>
+              </div>
+            </div>
+            <h4 class="mb-0">9.823</h4>
+            <p>Points earned this week</p>
+          </div>
+          <div class="chart-wrapper" style="height:70px;">
+            <canvas baseChart class="chart"
+            [datasets]="lineChart3Data"
+            [labels]="lineChart3Labels"
+            [options]="lineChart3Options"
+            [colors]="lineChart3Colours"
+            [legend]="lineChart3Legend"
+            [chartType]="lineChart3Type"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
+          </div>
         </div>
-      </div>
-    </div><!--/.col-->
+      </div><!--/.col-->
+    </div>
+    <div *ngIf="showGraph.pointslastweekgraph">
+      <div class="col-sm-6 col-lg-3">
+        <div class="card card-inverse card-danger">
+          <div class="card-block pb-0">
+            <div class="btn-group float-right" dropdown>
+              <button type="button" class="btn btn-transparent dropdown-toggle p-0" dropdownToggle>
+                <i class="icon-settings"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <a class="dropdown-item" href="#">Something else here</a>
+              </div>
+            </div>
+            <h4 class="mb-0">9.823</h4>
+            <p>Points earned last week</p>
+          </div>
+          <div class="chart-wrapper px-3" style="height:70px;">
+            <canvas baseChart class="chart"
+            [datasets]="barChart1Data"
+            [labels]="barChart1Labels"
+            [options]="barChart1Options"
+            [colors]="barChart1Colours"
+            [legend]="barChart1Legend"
+            [chartType]="barChart1Type"
+            (chartHover)="chartHovered($event)"
+            (chartClick)="chartClicked($event)"></canvas>
+          </div>
+        </div>
+      </div><!--/.col-->
+    </div>
   </div><!--/.row-->
   <div class="card">
     <div class="card-block">
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 2b0533c..e6d6c78 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -16,6 +16,7 @@ export class DashboardComponent implements OnInit {
   pointsTotal: any;
   averageTransactionToday: any;
   shuffledArray: any;
+  showGraph;
 
   constructor(
   private http: Http,
@@ -26,15 +27,21 @@ export class DashboardComponent implements OnInit {
     .subscribe(
       result => { 
         console.log(result);
+        // Return what graphs to show
+        this.showGraph = result.graphstoshow;
+        // Chart 1
         this.customersThisWeek = result.customersthisweek;
         this.lineChart1Data[0].data = this.customersThisWeek.customerno;
         this.lineChart1Labels = this.customersThisWeek.day;
+        // Chart 2
         this.customersLastWeek = result.customerslastweek;
         this.lineChart2Data[0].data = this.customersLastWeek.customerno;
         this.lineChart2Labels = this.customersLastWeek.day;
+        // Chart 3
         this.pointsThisWeek = result.pointsthisweek;
         this.lineChart3Data[0].data = this.pointsThisWeek.points;
         this.lineChart3Labels = this.pointsThisWeek.day;
+        // Chart 4
         this.pointsLastWeek = result.pointslastweek;
         this.barChart1Data[0].data = this.pointsLastWeek.points;
         this.barChart1Labels = this.pointsLastWeek.day;
diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts
index 4f7b406..0bab2cd 100644
--- a/src/app/providers/api-service.ts
+++ b/src/app/providers/api-service.ts
@@ -93,15 +93,24 @@ export class ApiService {
       "moneyspentthismonth" : 156.02,
       "pointstotal" : 506,
       "averagetransactiontoday" : 3.69
-    }  
+    }
     )
   }
    
   // Fake chart data to mimic
-
+    
   public graph_data(data) {
     return Observable.of(
     {
+      // graphstoshow is on server and changes every hour, listing what graphs to display
+      "graphstoshow" :
+        {
+          customersthisweekgraph : true,
+          customerslastweekgraph : false,
+          pointsthisweekgraph : true,
+          pointslastweekgraph : false,
+          
+        },
       "customersthisweek" :
         {
           day : ['Monday', 'tuesday','wednesday','thursday','friday','saturday','sunday'],